<template>
  <div class="backstage-user-info-wrap">
    <a-row :gutter="[25, 14]">
      <a-col v-for="item in infos" :key="item.label" class="info-col-warp">
        <a-col :span="item.labelSpan || 4">
          <span class="label">{{ item.label }}:</span>
        </a-col>
        <a-col :span="item.valueSpan || 20">
          <span v-if="item.isVHtml" v-html="item.value"></span>
          <div v-else-if="item.isTable">
            <a-table
              bordered
              :data-source="item.value"
              :columns="item.columns"
              :pagination="false"
              :scroll="{ x: 'calc(700px + 50%)', y: 450 }"
            >
            </a-table>
          </div>
          <div v-else-if="item.isSelect">
            <a-select
              style="width: 100%"
              v-model="item.value"
              @change="handleChange($event, item)"
              v-if="isDetail"
            >
              <a-select-option
                v-for="items in item.selectList"
                :value="items.value"
                :key="items.value"
              >
                {{ items.label }}
              </a-select-option>
            </a-select>
            <span v-else>{{ item.value }}</span>
          </div>
          <span v-else>{{ item.value }}</span>
        </a-col>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  props: {
    infos: Array,
  },
  data() {
    return {
      isDetail: false,
    }
  },
  mounted() {
    if (this.$route.fullPath.indexOf('detail') !== -1) {
      this.isDetail = false
    } else {
      this.isDetail = true
    }
  },
  methods: {
    handleChange(e) {
      this.$emit('selectChange', e)
    },
  },
}
</script>
